<template>
  <div
    class="home-container f_c_m_c"
    :style="{ background: type == 1 ? '#fa3833' : '#B2C8FC' }"
  >
    <div class="titleContent">
      <img v-if="type == 1" :src="bacRedImg" alt="" class="bacRedImg" />
      <img v-else :src="bacBlueImg" alt="" class="bacRedImg" />
    </div>
    <div class="textContent f_c_m_c">
      <!-- <div class="headerImgs f_r_m_c" v-if="shareType">
        <img :src="oldInfo.img" alt="" />
        <div class="f_c ml-10">
          <span class="font-36 font-500">{{ oldInfo.good_title }}</span>
          <span class="color_EA4237 font-26"
            >我想请你帮个忙，不知当讲不当讲</span
          >
        </div>
      </div> -->
      <div class="f_c_m_c contentBacMore">
        <div class="contentBacImg f_r_c_c">
          <img v-if="type == 1" :src="kydRedImg" alt="" />
          <img v-else :src="kydBlueImg" alt="" />
        </div>
        <div class="more_content">
          <div
            class="goods f_c_c_c "
            :style="{
              background:
                type == 1
                  ? 'linear-gradient(180deg, #FFE5DB, #FFFFFF)'
                  : 'linear-gradient(180deg, #DFE7FF, #FFFFFF)',
            }"
          >
            <goodsList
              key="goods1"
              ref="goodsList1"
              :item="goodsInfo"
              :time="interval"
              pageUrl="detail"
              style="width:100%;"
            ></goodsList>
          </div>
          <div
            class="btnMore f_c_m_c"
            :style="{
              background:
                type == 1
                  ? 'linear-gradient(180deg, #FFE5DB, #FFFFFF)'
                  : 'linear-gradient(180deg, #DFE7FF, #FFFFFF)',
            }"
          >
            <div
              class="f_r_m_c font-36 money bold_500"
              v-if="type == 1 && goodsInfo.order_status != 1"
            >
              已领取<span class="color_EA4237">{{ goodsInfo.cur_num }}</span
              >元，还差<span class="color_EA4237">{{
                goodsInfo.new_target_num
              }}</span
              >元可提现
            </div>
            <div
              class="f_r_m_c font-36 money bold_500"
              v-if="type != 1 && goodsInfo.order_status != 1"
            >
              已砍<span class="color_EA4237">{{ goodsInfo.cur_num }}</span
              >金币，还差<span class="color_EA4237">{{
                goodsInfo.new_target_num
              }}</span
              >金币
            </div>
            <div
              class="f_r_m_c font-36 money bold_500"
              v-if="goodsInfo.order_status == 1"
            >
              砍价成功
            </div>
            <div class="bar">
              <progressBar :item="goodsInfo" />
            </div>

            <div class="btn font-36 color_fff bold_500 f_r_c_c">
              <template v-if="goodsInfo.order_status > 2">
                <img :src="btn5Img" alt="" />
                <div class="f_r_c_c">
                  <div class="text f_r_c_c font-30">
                    砍价已失效
                  </div>
                </div>
              </template>
              <template
                v-if="
                  (goodsInfo.order_status <= 2 &&
                    (goodsInfo.state == 0 || goodsInfo.state == 1)) ||
                    goodsInfo.order_status == 1
                "
              >
                <img :src="btnBlueImg" v-if="type != 1" alt="" />
                <img :src="btnRedImg" v-if="type == 1" alt="" />
                <div v-if="shareType" class="f_r_c_c">
                  <div
                    class="text f_r_c_c font-30"
                    @click="clickBtn('shareInfoClick')"
                    v-if="
                      goodsInfo.order_status != '0' || goodsInfo.state == '0'
                    "
                  >
                    我也要免费领
                  </div>
                  <div
                    class="text f_r_c_c font-30"
                    @click="clickBtn('userBargain')"
                    v-else-if="goodsInfo.order_status == '0'"
                  >
                    {{ type == 1 ? "为好友助力" : "帮好友砍一刀" }}
                  </div>
                </div>
                <div v-if="!shareType" class="f_r_c_c">
                  <div
                    class="text f_r_c_c"
                    @click="clickBtn('userBargain')"
                    v-if="
                      goodsInfo.state == '1' && goodsInfo.order_status == '0'
                    "
                  >
                    砍一刀
                  </div>

                  <div
                    class="text f_r_c_c"
                    @click="getPrice"
                    v-else-if="goodsInfo.order_status == '1'"
                  >
                    {{ goodsInfo.good_type == 2 ? "复制兑换码" : "立即领取" }}
                  </div>
                  <div
                    class="text f_r_c_c"
                    @click="clickBtn"
                    v-else-if="
                      goodsInfo.order_status == '3' ||
                        goodsInfo.order_status == '6'
                    "
                  >
                    再领一次
                  </div>
                  <div
                    class="text f_r_c_c"
                    v-else-if="
                      goodsInfo.order_status == '2' ||
                        goodsInfo.order_status == '4' ||
                        goodsInfo.order_status == '5'
                    "
                  >
                    已领取
                  </div>
                </div>
              </template>
            </div>

            <div
              class="btn font-36 color_fff bold_500 f_r_c_c"
              @click="shareUrl"
              v-if="goodsInfo.order_status <= 2 && !shareType"
            >
              <img :src="btnShareImg" alt="" />
              <div class="text f_r_c_c font-30 color_D25004">
                众人拾柴火焰高，喊好友帮忙
              </div>
            </div>
            <div class="color_EA8B37 font-28 mb-20">
              秘籍:邀请新用户助力可更快提现
            </div>
          </div>
        </div>
      </div>

      <div class="swipeContent" v-if="dynamic_list.length">
        <swipeText :type="type == 1 ? 1 : 0" :list="dynamic_list" />
      </div>
      <div class="record f_c_m_c mt-20" v-if="noticeList.length">
        <div class="title_h2 f_r_c_c">
          <img :src="recordTitleImg" alt="" />
          <div class="f_r_c_c color_fff font-36 bold_500">砍价记录</div>
        </div>
        <div class="content f_c">
          <div
            class="f_r_m_c goods"
            v-for="item in dynamicOpenShow
              ? noticeList
              : noticeList.slice(0, 4)"
          >
            <div class="left f_r_m_c">
              <img :src="item.user_avatar" alt="" />
              <div class="f_c">
                <div class="f_r_m_c">
                  <span class="font-26">{{ item.user_name }}</span>
                  <span
                    class="font-20 color_FFEFCE tag"
                    v-if="item.is_crit == 1"
                    >最给力</span
                  >
                </div>
                <div class="color_666666 font-22 mt-10">
                  {{ item.paper }}
                </div>
              </div>
            </div>
          </div>
          <div
            class="f_r_c_c bottom_btn color_666666 font-24"
            @click="dynamicOpenShow = !dynamicOpenShow"
          >
            {{ dynamicOpenShow ? "收起" : "展开" }}
            <van-icon v-if="dynamicOpenShow" name="arrow-down" />
            <van-icon v-else name="arrow" />
          </div>
        </div>
      </div>
      <div class="more f_c_m_c " v-if="goods_list.length">
        <div class="title_h2 f_r_c_c">
          <img :src="recordTitleImg" alt="" />
          <div class="f_r_c_c color_fff font-36 bold_500">更多好货</div>
        </div>
        <div class="goods f_c mb-10" v-for="item in goods_list">
          <goodsList
            :item="item"
            class="mb-20"
            :key="item.id"
            @click="goDetail"
          ></goodsList>
        </div>
      </div>

      <div class="fixedBottomShare" @click="goShare" v-if="shareType">
        <img :src="shareImg" alt="" />
      </div>
      <div class="fixedBottomBtn_bac"></div>
      <div class="fixedBottomBtn f_r_c_c">
        <div class="bold_500 font-36 f_r_c_c color_fff">
          不想砍价？直接购买云手机
        </div>
      </div>
    </div>

    <div v-if="popupShow">
      <popupMore
        v-model="popupShow"
        :type="popupType"
        @sub="popupSub"
      ></popupMore>
    </div>
  </div>
</template>

<script>
import progressBar from "@/components/progressBar.vue";

import goodsList from "@/components/goodsList";
import swipeText from "@/components/swipeText";

import bacRedImg from "@/assets/kj_bac2.png";
import bacBlueImg from "@/assets/kj_bac1.png";
import btnBlueImg from "@/assets/btn1.png";
import btnRedImg from "@/assets/btn2.png";
import btn5Img from "@/assets/btn5.png";
import recordTitleImg from "@/assets/title2.png";
import shareImg from "@/assets/share1.png";
import btnShareImg from "@/assets/btnShare.png";

import kydRedImg from "@/assets/red_k.png";
import kydBlueImg from "@/assets/blue_k.png";

import { formatNum, typeOf, getUrlQuery,  } from "@/utils";
import getPriceCommon from "@/utils/getPriceCommon";

import {
  golbDetail,
  bargainLog,
  dynamicList,
  moreGoods,
  schedule,
  goodStatus,
  userBargain,
  award,
  winningAmount,
  redemptioncode,
} from "@/api/goods";

export default {
  name: "detailRed",
  components: { goodsList, progressBar, swipeText },
  data() {
    return {
      bacRedImg,
      bacBlueImg,
      btnBlueImg,
      btn5Img,
      recordTitleImg,
      shareImg,
      kydRedImg,
      kydBlueImg,
      btnRedImg,
      btnShareImg,
      type: "",
      item: {},
      shareType: 0,
      oldInfo: {}, //当前订单人员
      noticeList: [],
      dynamic_list: [],
      goods_list: [],
      goodsInfo: {},
      interval: 0,
      dynamicOpenShow: false,
      popupShow: false,
      popupType: "",
    };
  },
  computed: {
    code() {
      return this.$store.getters.code;
    },
  },
  created() {},
  mounted() {
    // console.log("aaaaa", this.$route.query);
    let item = this.$route.query;
    console.log("itemitem", item);
    if (item.token) {
      this.shareType = 1;
      item.g_o_id = item.g_o_id || item.params;
      this.handleLogin(item);
    } else {
      this.getDetail({ g_id: item.g_id || 0, g_o_id: item.g_o_id || 0 });
    }
  },
  methods: {
    ...getPriceCommon,
    handleLogin(params) {
      // console.log("aaaaa", window.location.href);
      // let params = getUrlQuery();
      console.log("params", params);
      // if (params.token) {
      //   this.handleLogin(params);
      // }
      this.$store.commit(`user/SET_CODE`, params.token);

      this.loading = true;
      let { mobilePhone: mobile_phone, userId: user_id, token: code } = params;
      this.$store
        .dispatch("user/login", { code, user_id, mobile_phone })
        .then(() => {
          this.loading = false;
          this.getDetail({
            g_id: params.g_id || 0,
            g_o_id: params.g_o_id || 0,
          });
        })
        .catch(() => {
          this.loading = false;
        });
    },
    goDetail(item) {
      let { g_id = "", g_o_id = "", type, good_type, good_class_id } = item;

      this.getDetail({ g_id: g_id, g_o_id: g_o_id || 0 });
    },
    clickBtn(name) {
      this[name]();
    },
    userBargain() {
      if (this._bargaining) return;
      this._bargaining = true;
      let goodsInfo = this.goodsInfo;
      let { g_o_id, g_id, share_user, cur_num, target_num } = goodsInfo;
      userBargain({
        g_o_id,
        type: 1,
      }).then((res) => {
        this._bargaining = false;
        this.getDetail({ g_id, g_o_id }, 1);
      });
    },
    //我也要免费领
    shareInfoClick() {
      let { g_id } = this.goodsInfo;

      goodStatus({ g_id }).then((res) => {
        if (res.data.is_click) {
          this.shareType = 0;
          this.getDetail({ g_id, g_o_id: 0 });
        } else {
          this.$router.push({
            path: "/",
            query: "",
          });
        }
      });
    },
    async shareUrl() {
      injectedObject.shareFirends(this.goodsInfo.g_o_id || 0);
    },
    goShare() {
      this.$router.push({
        path: "/share",
        query: "",
      });
    },
    getDetail(item, show) {
      golbDetail(item).then((res) => {
        let { data = {} } = res;
        let new_target_num = data.target_num - data.cur_num;
        new_target_num = formatNum(new_target_num);

        // 1现金,2Q币,3皮肤,4手办。 good_type

        data.new_target_num = new_target_num;

        data.percentage = this.progress(data);
        data.cur_num = formatNum(data.cur_num);

        this.goodsInfo = data;

        // this.$nextTick(() => {
        //   this.$refs.goodsList1.upload(data);
        // });
        this.type = data.good_type;

        this.countTime();

        // 获取砍价记录列表
        this.bargainLog();
        // 获取领取动态列表
        this.dynamicList();
        // 更多好货列表
        this.moreGoods();

        if (this.goodsInfo.order_status == "0" && show) {
          this.popupType = 2;
          this.popupShow = true;
        } else {
          if (data.is_current_user) {
            this.schedule();
          }
        }
      });
    },
    progress(obj) {
      let percentage = (obj.cur_num / obj.target_num) * 100;
      if (percentage > 100) percentage = 100;
      if (percentage < 0) percentage = 0;
      console.log("percentage", percentage, obj.cur_num, obj.target_num);
      return percentage;
    },
    countTime() {
      let { timestamp, now_time } = this.goodsInfo;
      let now = Math.round(new Date() / 1000);
      let interval = timestamp - now;
      interval = interval < 0 ? 0 : interval;
      this.interval = interval;

      console.log(" this.interval", this.interval);
      // 倒计时结束，更改界面状态
      if (interval === 0) {
      }
    },
    bargainLog() {
      let { g_o_id } = this.goodsInfo;
      bargainLog({
        g_o_id,
      }).then((res) => {
        res.data.forEach((el) => {
          el.gold = formatNum(el.gold);
        });
        this.noticeList = res.data;
      });
    },
    dynamicList() {
      dynamicList().then((res) => {
        this.dynamic_list = res.data;
      });
    },
    moreGoods() {
      moreGoods().then((res) => {
        res = typeOf(res.data) == "Array" ? res.data : [];
        let goods_list = [];
        res.forEach((el) => {
          let temp = {
            good_title: el.title,
            good_icon: el.icon,
            max_num: el.stock,
            num: el.ity_used,
            percentage: this.progress({
              target_num: el.ity_used,
              cur_num: el.stock,
            }),
            type: "0",
            btn_text: "点击免费拿",
            g_id: el.id,
            type: el.type,
          };
          goods_list.push(temp);
        });
        this.goods_list = goods_list;
      });
    },
    //好友砍价弹窗
    schedule() {
      let { g_o_id, cur_num, target_num } = this.goodsInfo;
      schedule({
        g_o_id,
      }).then((res) => {
        if (typeOf(res) === "Object" && res.user_name) {
          res.progress = parseInt((cur_num / target_num) * 100);
          res.unit = "元";
          res.total_gold = formatNum(res.total_gold);
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.home-container {
  position: relative;
  background-color: #fa3833;
  .titleContent {
    width: 100%;
    position: relative;
    .bacRedImg {
      width: 100%;
      height: 1088px;
    }
  }
  .textContent {
    width: 100%;
    // height: 100%;
    // position: absolute;
    // top: 0;
    // left: 0;
    position: relative;
    margin-top: -1060px;
    z-index: 1;
    .contentBacMore {
      position: relative;
      margin-top: 20px;
    }
    .contentBacImg {
      width: 682px;
      position: absolute;
      top: 180px;
      left: 0;
      > img {
        width: 614px;
        height: 95px;
      }
    }
    .more_content {
      // position: absolute;
      // top: 0px;
      // left: 0px;
      width: 682px;
      > .goods {
        border-radius: 10px;
        margin-bottom: 20px;
      }
      > div {
        width: 100%;
        box-sizing: border-box;
        padding: 0 10px;
        background: #fff;
      }
    }
    .headerImgs {
      width: 674px;
      height: 118px;
      background: rgba(255, 255, 255, 0.72);
      border-radius: 58px;
      border: 2px solid #ffffff;
      padding: 8px;
      box-sizing: border-box;
      margin-bottom: 15px;
      img {
        width: 102px;
        height: 102px;
        border-radius: 50%;
        background: #fff;
      }
    }
    .goods {
      width: 672px;
      border-radius: 24px;
    }
    .btnMore {
      width: 672px;
      // height: 390px;
      // background: linear-gradient(180deg, #ffe5db, #ffffff);
      // box-shadow: 0px 8px 4px 0px rgba(206, 65, 38, 0.32);
      border-radius: 24px;
      // border: 4px solid #ffffff;
      .money {
        margin-top: 64px;
      }
      .bar {
        width: 586px;
        margin-top: 42px;
        margin-bottom: 20px;
      }
      .btn {
        width: 512px;
        height: 119px;
        // margin-top: 45px;
        position: relative;
        > img {
          width: 100%;
          height: 100%;
        }
        > div {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          bottom: 10px;
        }
      }
    }
    > .swipeContent {
      margin: 40px 0 48px 0;
    }
  }
  .title_h2 {
    width: 285px;
    height: 25px;
    position: relative;
    margin-bottom: 30px;
    > img {
      width: 100%;
      height: 100%;
    }
    > div {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
  .record {
    .content {
      width: 672px;
      background: linear-gradient(0deg, #ffe5db, #ffffff);
      border-radius: 24px;
      border: 4px solid #ffffff;
      padding: 30px 30px 0 30px;
      box-sizing: border-box;
      .bottom_btn {
        height: 95px;
      }
      .goods {
        width: 608px;
        height: 130px;
        border-bottom: 2px solid #ffffff;
        .left {
          > img {
            width: 78px;
            height: 78px;
            margin-right: 20px;
          }
          > div {
            height: 78px;
            .tag {
              padding: 5px 10px;
              background: linear-gradient(00deg, #ff6700, #ff6600);
              border-radius: 15px 15px 15px 0px;
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
  .more {
    margin-top: 30px;
    .goods {
      width: 672px;
      height: 208px;
      background: #ffffff;
      border-radius: 24px;
    }
  }
  .fixedBottomBtn_bac {
    width: 100%;
    height: 120px;
  }
  .fixedBottomShare {
    position: fixed;
    bottom: 180px;
    width: 168px;
    height: 168px;
    right: 0;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  .fixedBottomBtn {
    position: fixed;
    bottom: 20px;
    width: 100%;
    > div {
      width: 638px;
      height: 94px;
      background: #ff8605;
      border-radius: 47px;
      opacity: 0.86;
    }
  }
}
</style>
